{% extends 'base.html' %}
{% block content %}
	
	{% if view_page %}
	    <h1 class="view_page_title">{{ view_page.title }}</h1>
	    <p class="view_page_content">{{ view_page.content|safe }}</p>
	    
	    {% if slideshows %}
	    	<div class="view_page_slideshows">
		    {% for entity in slideshows %}
		    	
	    		<div class="view_page_slideshow">
					<!--  initialize the TN3 when the DOM is ready -->
					<script type="text/javascript">
						$(document).ready(function() {
							//Thumbnailer.config.shaderOpacity = 1;
							$.fn.tn3.Gallery.config.autoplay = true;
							var tn1 = $('.slideshow_{{entity.pk}}').tn3({
								skinDir:"media",
								imageClick:"fullscreen",
								image:{
								maxZoom:1.5,
								crop:true,
								clickEvent:"dblclick",
								autoplay:true,
								startWithAlbums:true,
								transitions:[
								{
									type:"blinds"
								},{
									type:"grid"
								},{
									type:"grid",
									duration:460,
									easing:"easeInQuad",
									gridX:1,
									gridY:8,
									// flat, diagonal, circle, random
									sort:"random",
									sortReverse:false,
									diagonalStart:"bl",
									// fade, scale
									method:"scale",
									partDuration:360,
									partEasing:"easeOutSine",
									partDirection:"left"
								}
								]}
							});
						});
					</script>
					
				    <div class="slideshow_{{entity.pk}}">
						<div class="tn3 album">
						    <h4>Fixed Dimensions</h4>
						    <div class="tn3 description">Images with fixed dimensions</div>
						    <div class="tn3 thumb">/media/images/35x35/1.jpg</div>
						    <ol>
			    
					        {% for photo in entity.photos %}
								<li>
								    <h4>{{ photo.title }}</h4>
								    <div class="tn3 description">{{ photo.description }}</div>
								    <a href="{{ photo.url }}">
										<img src="{{ photo.thumb }}" />
								    </a>
								</li>
						    {% endfor %}
				    
						    </ol>
						</div>
					</div>
				</div>
		    {% endfor %}
		    </div>
		{% endif %}
		
	{% else %}
	    <p>Nothing to show.</p>
	{% endif %}

{% endblock %}
